React experimental_useFormState Validierungs-Pipeline: Aufbau robuster Formularvalidierungsketten

Die Formularvalidierung ist ein Eckpfeiler bei der Erstellung robuster und benutzerfreundlicher Webanwendungen. Der experimental_useFormState-Hook von React bietet einen leistungsstarken und flexiblen Ansatz zur Verwaltung des Formularzustands und zur Implementierung komplexer Validierungs-Pipelines. Dieser Blogbeitrag befasst sich damit, wie Sie experimental_useFormState nutzen können, um wartbare, skalierbare und international anpassbare Formularvalidierungssysteme zu erstellen.

experimental_useFormState verstehen

experimental_useFormState ist ein experimenteller React-Hook (zum Zeitpunkt dieses Schreibens; überprüfen Sie immer die offizielle React-Dokumentation für den neuesten Stand), der entwickelt wurde, um die Formularverwaltung und -validierung zu vereinfachen. Er kümmert sich um die Aktualisierung des Formularzustands und ermöglicht es Ihnen, Reducer-Funktionen zu definieren, um komplexere Zustandsübergänge zu verwalten. Sein Hauptvorteil liegt in seiner Fähigkeit, sich nahtlos in asynchrone Operationen und serverseitige Validierung zu integrieren.

Kernkonzepte

• Zustandsverwaltung: experimental_useFormState verwaltet den gesamten Formularzustand und reduziert so den Boilerplate-Code, der für die Aktualisierung einzelner Formularfelder erforderlich ist.
• Reducer-Funktionen: Es verwendet Reducer-Funktionen, um Zustandsaktualisierungen zu handhaben, was komplexe Logik ermöglicht und vorhersagbare Zustandsübergänge gewährleistet. Dies ähnelt useReducer, ist aber speziell auf den Formularzustand zugeschnitten.
• Asynchrone Operationen: Es lässt sich nahtlos in asynchrone Operationen integrieren, was die Handhabung von serverseitiger Validierung und Übermittlung erleichtert.
• Validierungs-Pipeline: Sie können eine Kette von Validierungsfunktionen erstellen, die nacheinander ausgeführt werden und einen strukturierten und organisierten Ansatz für die Formularvalidierung bieten.

Erstellen einer Validierungs-Pipeline

Eine Validierungs-Pipeline ist eine Abfolge von Funktionen, die nacheinander ausgeführt werden, um Formulardaten zu validieren. Jede Funktion führt eine spezifische Validierungsprüfung durch, und die Pipeline gibt ein aggregiertes Ergebnis zurück, das angibt, ob das Formular gültig ist, sowie alle zugehörigen Fehlermeldungen. Dieser Ansatz fördert Modularität, Wiederverwendbarkeit und Wartbarkeit.

Beispiel: Ein einfaches Registrierungsformular

Lassen Sie uns dies an einem einfachen Registrierungsformular veranschaulichen, das einen Benutzernamen, eine E-Mail-Adresse und ein Passwort erfordert.

1. Definieren des Formularzustands

Zuerst definieren wir den Anfangszustand unseres Formulars:

            const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {},
  isValid: false,
};

            

              
                Copy
              
            
          

2. Implementieren der Reducer-Funktion

Als Nächstes erstellen wir eine Reducer-Funktion, um Zustandsaktualisierungen zu handhaben:

            function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'VALIDATE_FORM':
      return {
        ...state,
        errors: action.errors,
        isValid: action.isValid,
      };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

3. Definieren der Validierungsfunktionen

Jetzt definieren wir einzelne Validierungsfunktionen für jedes Feld:

            const validateUsername = (username) => {
  if (!username) {
    return 'Benutzername ist erforderlich.';
  } else if (username.length < 3) {
    return 'Der Benutzername muss mindestens 3 Zeichen lang sein.';
  } else if (username.length > 20) {
    return 'Der Benutzername darf nicht länger als 20 Zeichen sein.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'E-Mail ist erforderlich.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'Die E-Mail-Adresse ist ungültig.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Passwort ist erforderlich.';
  } else if (password.length < 8) {
    return 'Das Passwort muss mindestens 8 Zeichen lang sein.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Erstellen der Validierungs-Pipeline

Wir stellen die Validierungsfunktionen zu einer Pipeline zusammen:

            const validationPipeline = (state) => {
  const errors = {};
  errors.username = validateUsername(state.username);
  errors.email = validateEmail(state.email);
  errors.password = validatePassword(state.password);

  const isValid = Object.values(errors).every((error) => error === null);

  return { errors, isValid };
};

            

              
                Copy
              
            
          

5. Integration mit experimental_useFormState

            import React from 'react';
import { experimental_useFormState as useFormState } from 'react';

function RegistrationForm() {
  const [state, dispatch] = useFormState(formReducer, initialState);

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { errors, isValid } = validationPipeline(state);

    dispatch({
      type: 'VALIDATE_FORM',
      errors,
      isValid,
    });

    if (isValid) {
      // Senden des Formulars
      console.log('Formular ist gültig, wird gesendet...', state);
    } else {
      console.log('Formular ist ungültig, bitte korrigieren Sie die Fehler.');
    }
  };

  return (
    

      

        Benutzername:
        
        {state.errors.username && 
{state.errors.username}
}
      
      

        E-Mail:
        
        {state.errors.email && 
{state.errors.email}
}
      
      

        Passwort:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Registrieren
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Fortgeschrittene Validierungstechniken

Bedingte Validierung

Manchmal müssen Sie ein Feld basierend auf dem Wert eines anderen Feldes validieren. Zum Beispiel könnten Sie eine Telefonnummer nur dann verlangen, wenn der Benutzer ein bestimmtes Land auswählt.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'Telefonnummer ist für die USA erforderlich.';
  }
  return null;
};

            

              
                Copy
              
            
          

Asynchrone Validierung

Asynchrone Validierung ist entscheidend, wenn Sie die Gültigkeit eines Feldes gegen eine serverseitige Datenbank oder API prüfen müssen. Zum Beispiel möchten Sie vielleicht überprüfen, ob ein Benutzername bereits vergeben ist.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Benutzername ist bereits vergeben.';
    }
    return null;
  } catch (error) {
    console.error('Fehler bei der Überprüfung der Benutzernamen-Verfügbarkeit:', error);
    return 'Fehler bei der Überprüfung der Benutzernamen-Verfügbarkeit.';
  }
};

            

              
                Copy
              
            
          

Sie müssen diese asynchrone Validierung in Ihren Reducer integrieren und die asynchrone Natur entsprechend mit Promises oder async/await handhaben.

Benutzerdefinierte Validierungsregeln

Sie können benutzerdefinierte Validierungsregeln erstellen, um spezifische Geschäftslogik oder Formatierungsanforderungen zu handhaben. Zum Beispiel müssen Sie möglicherweise eine Postleitzahl basierend auf dem ausgewählten Land validieren.

            const validatePostalCode = (postalCode, country) => {
  if (country === 'USA' && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(postalCode)) {
    return 'Ungültige Postleitzahl für die USA.';
  } else if (country === 'Canada' && !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(postalCode)) {
    return 'Ungültige Postleitzahl für Kanada.';
  }
  return null;
};

            

              
                Copy
              
            
          

Überlegungen zur Internationalisierung (i18n)

Beim Erstellen von Formularen für ein globales Publikum ist Internationalisierung unerlässlich. Berücksichtigen Sie Folgendes:

• Datumsformate: Verwenden Sie eine Bibliothek wie date-fns oder moment.js, um verschiedene Datumsformate basierend auf der Ländereinstellung des Benutzers zu handhaben.
• Zahlenformate: Verwenden Sie Intl.NumberFormat, um Zahlen entsprechend der Ländereinstellung des Benutzers zu formatieren.
• Währungsformate: Verwenden Sie Intl.NumberFormat, um Währungen korrekt zu formatieren, einschließlich des entsprechenden Währungssymbols und Dezimaltrennzeichens.
• Adressformate: Erwägen Sie die Verwendung einer Bibliothek wie libaddressinput, um verschiedene Adressformate basierend auf dem Land des Benutzers zu handhaben.
• Übersetzte Fehlermeldungen: Speichern Sie Fehlermeldungen in einer Übersetzungsdatei und verwenden Sie eine Bibliothek wie i18next, um sie in der Sprache des Benutzers anzuzeigen.

Beispiel: Übersetzte Fehlermeldungen

So können Sie i18next verwenden, um Fehlermeldungen zu übersetzen:

            // en.json
{
  "username_required": "Username is required.",
  "email_required": "Email is required.",
  "invalid_email": "Email is not valid."
}

// de.json
{
  "username_required": "Benutzername ist erforderlich.",
  "email_required": "E-Mail-Adresse ist erforderlich.",
  "invalid_email": "Die E-Mail-Adresse ist ungültig."
}

// Component
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  const validateEmail = (email) => {
    if (!email) {
      return t('email_required');
    } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
      return t('invalid_email');
    }
    return null;
  };
}

            

              
                Copy
              
            
          

Überlegungen zur Barrierefreiheit

Die Sicherstellung der Barrierefreiheit von Formularen ist entscheidend für die Erstellung inklusiver Webanwendungen. Befolgen Sie diese Richtlinien:

• Verwenden Sie semantisches HTML: Verwenden Sie geeignete HTML-Elemente wie <label>, <input> und <button>.
• Stellen Sie klare Beschriftungen bereit: Verknüpfen Sie Beschriftungen mit Formularfeldern, indem Sie das for-Attribut am <label>-Element und das id-Attribut am <input>-Element verwenden.
• Verwenden Sie ARIA-Attribute: Verwenden Sie ARIA-Attribute, um assistiven Technologien, wie z. B. Bildschirmlesern, zusätzliche Informationen bereitzustellen.
• Stellen Sie Fehlermeldungen bereit: Zeigen Sie klare und prägnante Fehlermeldungen an, die leicht verständlich sind. Verwenden Sie ARIA-Attribute wie aria-describedby, um Fehlermeldungen mit Formularfeldern zu verknüpfen.
• Gewährleisten Sie die Tastaturnavigation: Stellen Sie sicher, dass Benutzer das Formular mit der Tastatur navigieren können. Verwenden Sie das tabindex-Attribut, um die Fokusreihenfolge zu steuern.
• Verwenden Sie ausreichenden Kontrast: Stellen Sie einen ausreichenden Kontrast zwischen Text- und Hintergrundfarben sicher, damit das Formular für Benutzer mit Sehbehinderungen lesbar ist.

Bewährte Praktiken

• Halten Sie Validierungsfunktionen modular: Erstellen Sie kleine, wiederverwendbare Validierungsfunktionen, die spezifische Prüfungen durchführen.
• Verwenden Sie eine konsistente Fehlerbehandlungsstrategie: Implementieren Sie eine durchgängige Fehlerbehandlungsstrategie in Ihrer gesamten Anwendung.
• Stellen Sie benutzerfreundliche Fehlermeldungen bereit: Zeigen Sie klare und prägnante Fehlermeldungen an, die den Benutzern helfen zu verstehen, was schief gelaufen ist und wie sie es beheben können.
• Testen Sie Ihre Formulare gründlich: Testen Sie Ihre Formulare mit verschiedenen Datentypen und verschiedenen Browsern, um sicherzustellen, dass sie korrekt funktionieren.
• Verwenden Sie eine Formularbibliothek: Erwägen Sie die Verwendung einer Formularbibliothek wie Formik oder React Hook Form, um die Formularverwaltung und -validierung zu vereinfachen. Diese Bibliotheken bieten eine breite Palette von Funktionen, wie z. B. Formularzustandsverwaltung, Validierung und Übermittlungsbehandlung.
• Zentralisieren Sie die Definitionen von Fehlermeldungen: Pflegen Sie ein zentrales Verzeichnis aller Formularfehlermeldungen, um Konsistenz und Wartbarkeit zu erleichtern. Dies vereinfacht auch den Internationalisierungsprozess.

Fazit

Der experimental_useFormState-Hook von React bietet in Kombination mit einer gut definierten Validierungs-Pipeline einen leistungsstarken und flexiblen Ansatz zum Erstellen robuster und wartbarer Formulare. Indem Sie die in diesem Blogbeitrag beschriebenen bewährten Praktiken befolgen, können Sie Formulare erstellen, die benutzerfreundlich, barrierefrei und international anpassbar sind. Denken Sie daran, immer die offizielle React-Dokumentation für die neuesten Updates zu experimentellen Funktionen zu konsultieren.

Die Entwicklung einer effektiven Formularvalidierung ist ein kontinuierlicher Lernprozess. Experimentieren Sie mit verschiedenen Techniken und passen Sie sie an Ihre spezifischen Bedürfnisse an. Der Schlüssel liegt darin, die Benutzererfahrung zu priorisieren und Formulare zu erstellen, die sowohl einfach zu bedienen als auch zuverlässig sind.